<template>
  <!-- 基础信息 -->
  <div>
    <div class="top-btn-group">
      <el-button type="primary" size="mini" @click="handleSave">保存</el-button>
      <el-button size="mini" @click="handleBack">取消</el-button>
    </div>
    <div>
      <el-form ref="refForm" class="financeForm" :rules="formRules" :model="formData" size="mini" label-width="170px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="施工单位编码:" size="mini" prop="unitCode">
              <span>{{ formData.unitCode }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="施工单位名称:" prop="unitName">
              <span>{{ formData.unitName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="签约时间:" prop="signUpTime">
              <el-date-picker
                v-model="formData.signUpTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                align="right"
                type="datetime"
                placeholder="选择日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="负责人:" size="mini" prop="principal">
              <span>{{ formData.principal }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="负责人电话:" size="mini" prop="principalPhone">
              <el-input v-model.number="formData.principalPhone" maxlength="11" placeholder="请输入负责人电话" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="QQ:" size="mini" prop="unitQq">
              <el-input v-model.number="formData.unitQq" placeholder="请输入QQ" />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="地址:" size="mini" prop="address">
              <el-input v-model.number="formData.address" placeholder="请输入地址" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮编:" size="mini" prop="postcode">
              <el-input v-model.number="formData.postcode" placeholder="请输入邮编" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="同一时间最大承接面积:" size="mini" prop="sameTimeMaxArea">
              <el-input v-model.number="formData.sameTimeMaxArea" placeholder="请输入同一时间最大承接面积" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="同一时间最大承接项目数量:" size="mini" prop="sameTimeMaxProject">
              <el-input v-model.number="formData.sameTimeMaxProject" placeholder="请输入同一时间最大承接项目数量" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="质保金最低限额:" size="mini" prop="warrantyMinNorm">
              <el-input v-model.number="formData.warrantyMinNorm" placeholder="请输入质保金最低限额" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="合作状态:" size="mini" prop="cooperationState">
              <el-select v-model="formData.cooperationState" placeholder="请选择" style="width:100%">
                <el-option v-for="item in cooperationStateList" :key="item.dictCode" :label="item.dictName" :value="item.dictCode" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="当前保证金余额（元）:" size="mini" prop="currentWarrantyNumber">
              <span>{{ formData.currentWarrantyNumber }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注:" size="mini" prop="remark">
              <el-input v-model.number="formData.remark" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
// import { getDictByType } from '@/api/dataDict'
import { queryEditData, submitUnitMng } from '@/api/constructionUnitMng'
import { getDictByPatchType } from '@/api/dataDict'
export default {
  name: 'BaseInfo',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    detailData: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    const validatePhone = (rule, value, callback) => {
      if (!value || value.length === 0) {
        return callback(new Error('请输入手机号码'))
      } else {
        if (!(/^1[3456789]\d{9}$/.test(value))) {
          return callback(new Error('请输入正确的手机号码'))
        }
      }
      callback()
    }
    return {
      cooperationStateList: [], // 合作状态
      formData: {},
      formRules: {
        time: [
          { required: true, message: '请选择签约时间', trigger: 'blur' }
        ],
        principalPhone: [
          { required: true, message: '请输入负责人电话', trigger: 'blur' },
          { validator: validatePhone, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入地址', trigger: 'blur' }
        ],
        cooperationState: [
          { required: true, message: '请选择合作状态', trigger: 'blur' }
        ],
        sameTimeMaxArea: [
          { type: 'number', message: '请输入数字' }
        ],
        sameTimeMaxProject: [
          { type: 'number', message: '请输入数字' }
        ]
      }
    }
  },
  async created() {
    this.formData = this.detailData
    await this.getEditData(this.formData.data.id)
    await this.getDictByPatchTypeAll(['COOPERATION_STATE'])
      .then(res => {
        this.cooperationStateList = res.COOPERATION_STATE // 合作状态
      })
  },
  activated() {},
  methods: {
    getEditData(id) {
      queryEditData(id).then(res => {
        if (res.success) {
          this.formData = res.data
        }
      })
    },
    // 获取数据字典
    async getDictByPatchTypeAll(data) {
      const obj = await getDictByPatchType(data)
        .then(res => {
          return res
        })
      return obj
    },
    handleSave() {
      this.$refs['refForm'].validate((valid) => {
        if (valid) {
          submitUnitMng(this.formData).then(res => {
            if (res.success) {
              this.$message.success('操作成功')
              this.$confirm('保存成功，是否需要返回列表界面?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.handleBack()
              })
            }
          }).catch((res) => {
            this.$message.warning(res.msg)
          })
        }
      })
    },
    handleBack() {
      this.$emit('goBack')
    }
  }
}
</script>

<style lang="scss" scoped>
.top-btn-group{
  text-align: right;
  margin-bottom: 20px;
}
</style>
